<template>
  <div class="channel-data">
    <el-tabs v-model="activeName" @tab-click="handleClick()" type="border-card">
      <el-tab-pane label="人才与招聘浏览数据" name="first">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect2="true"
          :options2="this.$ENUMS.terminalSl"
        ></statistics-data>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import StatisticsData from "@/components/StatisticsData";
import { fieldCover } from "@/utils/field";

export default {
  components: {
    StatisticsData,
  },
  data() {
    return {
      activeName: "first",
      coreData: {},
      xAxis: [],
      yAxis: [],
      series: [],
      legend: [],
      flag: false,
      tableLoadData: [],
      tableHeadConfig: [],
      modelVal: "",
    };
  },
  watch: {
    modelVal(newval) {
      var startTime = newval.dataVal[0];
      var endTime = newval.dataVal[1];
      var workType = newval.workType2;
      this.handleClick(startTime, endTime, workType.toString());
    },
  },
  methods: {
    async handleClick(startTime, endTime, workType) {
      this.$cancel(); //未加载完的清除取消上次请求，只保留最后一次请求
      this.flag = false;
      this.tableLoadData = [];
      this.tableHeadConfig = [];
      this.legend = [];
      this.yAxis = [];
      this.xAxis = [];
      this.series = [];
      if (this.activeName == "first") {
        await this.$service.StatisTalentJob().then((res) => {
          this.coreData.data = res;
        });
        this.$service
          .StatisTalentJobChart({
            startDate: startTime,
            endDate: endTime,
            os: workType,
          })
          .then((res) => {
            this.tableLoadData = [...res.dayData, ...res.otherData];
            this.tableHeadConfig = this.$ENUMS.jobGlanceSl;
            this.legend = this.$ENUMS.jobGlanceSlLegend;
            var Cnts = [[], [], [], [], []];
            res.dayData.map((item) => {
              this.xAxis.push(item.day);
              Cnts[0].push(item.talentCnt);
              Cnts[1].push(item.jobCnt);
              Cnts[2].push(item.talentCateCnt);
              Cnts[3].push(item.jobCateCnt);
              Cnts[4].push(item.jobDetailCnt);
            });
            Cnts.map((cnt, index) => {
              var serie = {
                name: this.legend[index],
                type: "line",
                data: cnt,
                yAxisIndex: index == 2 || index == 3 ? Cnts.length - 1 : null,
              };
              var y = {
                type: "value",
                min: 0,
                position: Cnts.length == index + 1 ? "right" : "left",
              };
              this.yAxis.push(y);
              this.series.push(serie);
            });
            fieldCover(res.otherData, res.dayData);
            this.flag = true;
          })
          .catch((err) => {});
      }
    },
  },
};
</script>
<style lang="less" scoped>
.channel-data {
  text-align: left;
}
</style>
